<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script>
</head>

<body>
    <div id="app" class="demo">
        <div>
            <!-- set up 函数的基本使用 -->
            <setupdiv class="demo" test="学习 setup 函数" @emit-test="my_print">
                我是slot
            </setupdiv>
        </div>
    </div>

    <template id="setupdemo">
        <div>
            <!-- 如果slot 插槽为根节点，有提示警告 -->
            <!-- 额外的非道具属性（类）已传递给组件，但无法自动继承，因为组件呈现片段或文本根节点 -->
            <slot></slot>
        </div>

    </template>


</body>
<script>

    const setupConfig = {
        template: '#setupdemo',
        emits: ['emit-test'],
        // props 属性需要线接收才能在组件中获取
        props: {
            test: {
                type: String,
                required: false,
                default: ''
            }
        },
        // setup函数接收两个参数分别是 props 和 context
        setup(props, context) {
            // props 对象中包含所有父组件中传入的 非class 参数
            console.log(props)
            console.log(props.test)
            // context 对象中包含三个对象分别是 attrs（所有非props属性），slots（父组件中传入的插槽），emit（用于触发事件）
            console.log('class属性为:' + context.attrs.class)
            // 触发事件如 context.emit("name",value)
            context.emit('emit-test')
            console.log(context.slots)

        },

    }

    const HelloVueApp = {
        name: 'app',
        components: {
            setupdiv: setupConfig
        },

        methods: {
            my_print() {
                console.log('学习 setup 函数hhhh')
            }
        }
    }
    Vue.createApp(HelloVueApp).mount('#app')
</script>

</html>